<script setup lang="ts">
import { FileUpload } from "@ark-ui/vue/file-upload";
import { Upload, X } from "lucide-vue-next";
import { ref, onMounted } from "vue";

async function fileFromImageUrl(
  url: string,
  filename = "image.jpg"
): Promise<File> {
  const response = await fetch(url);
  const blob = await response.blob();
  const contentType = blob.type || "image/jpeg";

  return new File([blob], filename, { type: contentType });
}

const acceptedFiles = ref<File[]>([]);

onMounted(async () => {
  const files = await Promise.all(
    Array.from({ length: 4 }).map((_, index) =>
      fileFromImageUrl(
        `https://picsum.photos/1000/800?grayscale&random=${index + 1}`,
        `photo${index + 1}.jpg`
      )
    )
  );
  acceptedFiles.value = files;
});

const handleFileChange = (e: { acceptedFiles: File[] }) => {
  acceptedFiles.value = e.acceptedFiles;
};
</script>

<template>
  <FileUpload.Root
    accept="image/*"
    :max-files="10"
    class="w-full max-w-4xl"
    :accepted-files="acceptedFiles"
    @file-change="handleFileChange"
  >
    <FileUpload.Context v-slot="context">
      <div
        class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 bg-gray-50 dark:bg-gray-800 min-h-64"
      >
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
            Uploaded Files ({{ context.acceptedFiles.length }})
          </h3>
          <FileUpload.Trigger
            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2"
          >
            <Upload class="w-3 h-3" />
            Add more
          </FileUpload.Trigger>
        </div>

        <!-- Images Grid -->
        <FileUpload.ItemGroup v-if="context.acceptedFiles.length > 0">
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <FileUpload.Item
              v-for="file in context.acceptedFiles"
              :key="file.name"
              :file="file"
              class="relative"
            >
              <div
                class="relative aspect-square rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700"
              >
                <FileUpload.ItemPreview
                  type="image/*"
                  class="w-full h-full object-cover"
                >
                  <FileUpload.ItemPreviewImage
                    class="w-full h-full object-cover"
                  />
                </FileUpload.ItemPreview>

                <!-- Delete Button -->
                <FileUpload.ItemDeleteTrigger
                  class="absolute top-2 right-2 w-6 h-6 bg-black text-white rounded-full flex items-center justify-center hover:bg-gray-800 focus:outline-hidden focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
                >
                  <X class="w-3 h-3" />
                </FileUpload.ItemDeleteTrigger>
              </div>
            </FileUpload.Item>
          </div>
        </FileUpload.ItemGroup>

        <!-- Empty State -->
        <FileUpload.Dropzone
          v-else
          class="flex flex-col items-center justify-center py-8 text-center cursor-pointer"
        >
          <div
            class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 flex items-center justify-center mb-4"
          >
            <Upload class="w-5 h-5 text-gray-400 dark:text-gray-500" />
          </div>
          <p class="text-gray-600 dark:text-gray-400 text-sm">
            Click to upload or drag and drop images here
          </p>
        </FileUpload.Dropzone>
      </div>
    </FileUpload.Context>

    <FileUpload.HiddenInput />
  </FileUpload.Root>
</template>
